<template>
  <view class="content">
    <view class="paytype" v-if="orderDetail">
      <image
        v-if="orderDetail.pay_status == 1"
        class="paytype_icon"
        src="../../static/Pending_payment.png"
      ></image>
      <image
        v-else-if="orderDetail.pay_status == 2"
        class="paytype_icon"
        src="../../static/Paid.png"
      ></image>
      <image
        v-else-if="orderDetail.pay_status == 4"
        class="paytype_icon"
        src="../../static/unpaid.png"
      ></image>

      <view v-if="orderDetail.pay_status == 1" class="paytype_status"
        >待付款</view
      >
      <view v-else-if="orderDetail.pay_status == 2" class="paytype_status"
        >交易成功</view
      >
      <view v-else-if="orderDetail.pay_status == 4" class="paytype_status"
        >超时未支付</view
      >

      <!-- <view
        v-if="orderDetail.pay_status == 1"
        class="paytype_detail paytype_highlight"
        >{{ orderDetail.expire_at }} 后关闭</view
      > -->

      <view
        v-if="orderDetail.pay_status == 1"
        class="paytype_detail paytype_highlight"
      >
        <view
          class=""
          style="display: flex; align-content: center; justify-content: center"
        >
          <u-count-down
            :timestamp="oldTime"
            separator="colon"
            separator-color="#1FE7E7"
            separator-size="28"
            font-size="28"
            @end="end()"
            color="#1FE7E7"
            :show-border="false"
            bg-color="transparent"
          ></u-count-down>
          <view class="unpaid_left">后关闭</view>
        </view>
      </view>
      <view v-else-if="orderDetail.pay_status == 2" class="paytype_detail"
        >可在我的藏品看到该藏品</view
      >
      <view v-else-if="orderDetail.pay_status == 4" class="paytype_detail"
        >订单已取消</view
      >
    </view>

    <view class="record" v-if="orderDetail_product">
      <image class="record_image" :src="orderDetail_product.cover"></image>

      <view class="record_content">
        <view class="record_content_title">{{ orderDetail_product.name }}</view>
        <view class="record_content_second">
          <image
            class="record_content_avatar"
            :src="orderDetail_product.creator_avatar"
          ></image>
          <view class="record_content_username">{{
            orderDetail_product.creator_name
          }}</view>
        </view>
        <view class="record_content_third">
          <view class="record_content_price"
            >¥ {{ orderDetail_product.price }}</view
          >
          <!-- <view class="record_content_status">待付款</view> -->
          <view class="record_content_num" v-if="!marketstate"
            >x{{ orderDetail.num }}</view
          >
        </view>
      </view>
    </view>

    <view class="detail" v-if="orderDetail">
      <view class="detail_row">
        <view class="detail_row_left">商品价格</view>
        <view class="detail_row_right">{{ orderDetail_product.price }}元</view>
      </view>

      <view class="detail_row" v-if="!marketstate">
        <view class="detail_row_left">订单金额</view>
        <view class="detail_row_right">{{ orderDetail.total_price }}元</view>
      </view>

      <!-- 微信，支付宝 -->
      <view class="detail_row" v-if="orderDetail.pay_status == 2">
        <view class="detail_row_left">支付方式</view>
        <view class="detail_row_right">
          <text v-if="orderDetail.pay_type == 1">现金支付</text>
          <text v-else-if="orderDetail.pay_type == 2">支付宝</text>
          <text
            v-else-if="orderDetail.pay_type == 3 || orderDetail.pay_type == 4"
            >微信</text
          >
          <text v-else-if="orderDetail.pay_type == 7">银行卡</text>
          <text v-else-if="orderDetail.pay_type == 8">支付宝</text>
          <text v-else-if="orderDetail.pay_type == 9">墨者支付</text>
          <text v-else-if="orderDetail.pay_type == 10">小马支付</text>
          <text v-else-if="orderDetail.pay_type == 11">汇元支付</text>
          <text v-else-if="orderDetail.pay_type == 13">杉德支付</text>
          <text v-else-if="orderDetail.pay_type == 14">零钱支付</text>
        </view>
      </view>

      <view class="detail_row" v-if="!marketstate">
        <view class="detail_row_left">交易数量</view>
        <view class="detail_row_right">{{ orderDetail.num }}</view>
      </view>

      <view class="detail_row">
        <view class="detail_row_left">创建时间</view>
        <view class="detail_row_right">{{ orderDetail.created_at }}</view>
      </view>

      <view class="detail_row">
        <view class="detail_row_left">订单编号</view>
        <view class="detail_row_right">{{ orderDetail.order_no }}</view>
      </view>

      <view class="detail_row" v-if="orderDetail.pay_status == 4">
        <view class="detail_row_left">取消时间</view>
        <view class="detail_row_right">{{ orderDetail.expire_at }}</view>
      </view>

      <view class="detail_row" v-if="orderDetail.pay_status == 2">
        <view class="detail_row_left">支付时间</view>
        <view class="detail_row_right">{{ orderDetail.pay_at }}</view>
      </view>
    </view>

    <view class="bottom" v-if="orderDetail.pay_status == 1 && marketstate">
      <view class="bottom_button" @click="$u.debounce(pay, 1000, true)"
        >立即支付</view
      >
    </view>

    <view class="bottom2" v-else-if="orderDetail.pay_status == 1">
      <view class="bottom2_total">
        <text class="bottom2_total_text1">合计：</text>
        <text class="bottom2_total_text2">¥ {{ orderDetail.total_price }}</text>
      </view>
      <view class="bottom2_button" @click="$u.debounce(pay, 1000, true)"
        >立即支付</view
      >
    </view>

    <view class="popup_box" v-if="orderDetail.pay_status == 1">
      <view class="popup_box_top">
        请选择支付方式
        <!-- <span v-if="!backcardstate" @click="tobackcard">绑定银行卡</span>  -->
      </view>

      <!-- 余额支付(现金支付) -->
      <!-- src="../../static/balance.png" -->
      <!-- 余额支付 -->
      <view
        class="popup_box_paytype"
        v-if="OpenPayTypeArr.indexOf('1') != -1"
        @click="handleCheckPayType(8)"
      >
        <view class="popup_box_paytype_left">
          <image
            class="popup_box_paytype_icon"
            src="../../static/cashWallet_pay.png"
          ></image>
          <view class="popup_box_paytype_type">现金支付({{ balancenow }})</view>
        </view>

        <image
          v-if="payTypeChecked == 8"
          class="popup_box_paytype_checked"
          src="../../static/checked.png"
        ></image>
        <image
          v-else
          class="popup_box_paytype_checked"
          src="../../static/unchecked.png"
        ></image>
      </view>

      <!-- 首信易 -->
      <view
        class="popup_box_paytype"
        v-if="OpenPayTypeArr.indexOf('5') != -1"
        @click="handleCheckPayType(2)"
      >
        <view class="popup_box_paytype_left">
          <image
            class="popup_box_paytype_icon"
            src="../../static/shouxinyilogo.png"
          ></image>
          <view class="popup_box_paytype_type">首信易</view>
        </view>

        <image
          v-if="payTypeChecked == 2"
          class="popup_box_paytype_checked"
          src="../../static/checked.png"
        ></image>
        <image
          v-else
          class="popup_box_paytype_checked"
          src="../../static/unchecked.png"
        ></image>
      </view>

      <!-- 支付宝 -->
      <view
        class="popup_box_paytype"
        v-if="OpenPayTypeArr.indexOf('8') != -1"
        @click="handleCheckPayType(0)"
      >
        <view class="popup_box_paytype_left">
          <image
            class="popup_box_paytype_icon"
            src="../../static/zhiFuBao.png"
          ></image>
          <view class="popup_box_paytype_type">支付宝</view>
        </view>

        <image
          v-if="payTypeChecked == 0"
          class="popup_box_paytype_checked"
          src="../../static/checked.png"
        ></image>
        <image
          v-else
          class="popup_box_paytype_checked"
          src="../../static/unchecked.png"
        ></image>
      </view>

      <!-- 支付宝2 墨者支付-->
      <view
        class="popup_box_paytype"
        v-if="OpenPayTypeArr.indexOf('9') != -1"
        @click="handleCheckPayType(4)"
      >
        <view class="popup_box_paytype_left">
          <image
            class="popup_box_paytype_icon"
            src="../../static/mozhe_logo_white.png"
          ></image>
          <view class="popup_box_paytype_type">墨者支付</view>
        </view>

        <image
          v-if="payTypeChecked == 4"
          class="popup_box_paytype_checked"
          src="../../static/checked.png"
        ></image>
        <image
          v-else
          class="popup_box_paytype_checked"
          src="../../static/unchecked.png"
        ></image>
      </view>

      <!-- 小马哥支付 -->
      <view
        class="popup_box_paytype"
        v-if="OpenPayTypeArr.indexOf('10') != -1"
        @click="handleCheckPayType(5)"
      >
        <view class="popup_box_paytype_left">
          <image
            class="popup_box_paytype_icon"
            src="../../static/xiaoma_logo.jpg"
          ></image>
          <view class="popup_box_paytype_type">小马支付</view>
        </view>

        <image
          v-if="payTypeChecked == 5"
          class="popup_box_paytype_checked"
          src="../../static/checked.png"
        ></image>
        <image
          v-else
          class="popup_box_paytype_checked"
          src="../../static/unchecked.png"
        ></image>
      </view>

      <!-- 汇元支付 -->
      <view
        class="popup_box_paytype"
        v-if="OpenPayTypeArr.indexOf('11') != -1"
        @click="handleCheckPayType(6)"
      >
        <view class="popup_box_paytype_left">
          <image
            class="popup_box_paytype_icon"
            src="../../static/huiyuan_logo.png"
          ></image>
          <view class="popup_box_paytype_type">汇元支付</view>
        </view>

        <image
          v-if="payTypeChecked == 6"
          class="popup_box_paytype_checked"
          src="../../static/checked.png"
        ></image>
        <image
          v-else
          class="popup_box_paytype_checked"
          src="../../static/unchecked.png"
        ></image>
      </view>

      <!-- 余额支付(零钱支付) -->
      <view
        class="popup_box_paytype"
        v-if="OpenPayTypeArr.indexOf('14') != -1"
        @click="handleCheckPayType(9)"
      >
        <view class="popup_box_paytype_left">
          <image
            class="popup_box_paytype_icon"
            src="../../static/coinWallet_pay.png"
          ></image>
          <view class="popup_box_paytype_type"
            >零钱支付({{ smallChange }})</view
          >
        </view>

        <image
          v-if="payTypeChecked == 9"
          class="popup_box_paytype_checked"
          src="../../static/checked.png"
        ></image>
        <image
          v-else
          class="popup_box_paytype_checked"
          src="../../static/unchecked.png"
        ></image>
      </view>

      <!-- 杉德支付 -->
      <view
        class="popup_box_paytype"
        v-if="OpenPayTypeArr.indexOf('13') != -1"
        @click="handleCheckPayType(7)"
      >
        <view class="popup_box_paytype_left">
          <image
            class="popup_box_paytype_icon"
            src="../../static/shande_logo.jpg"
          ></image>
          <view class="popup_box_paytype_type">杉德快捷支付</view>
        </view>

        <image
          v-if="payTypeChecked == 7"
          class="popup_box_paytype_checked"
          src="../../static/checked.png"
        ></image>
        <image
          v-else
          class="popup_box_paytype_checked"
          src="../../static/unchecked.png"
        ></image>
      </view>

      <!-- 杉德收银台15 -->
      <view
        class="popup_box_paytype"
        v-if="OpenPayTypeArr.indexOf('15') != -1"
        @click="handleCheckPayType(10)"
      >
        <view class="popup_box_paytype_left">
          <image
            class="popup_box_paytype_icon"
            src="../../static/shande_logo.jpg"
          ></image>
          <view class="popup_box_paytype_type">杉德钱包支付</view>
        </view>

        <image
          v-if="payTypeChecked == 10"
          class="popup_box_paytype_checked"
          src="../../static/checked.png"
        ></image>
        <image
          v-else
          class="popup_box_paytype_checked"
          src="../../static/unchecked.png"
        ></image>
      </view>

      <!-- 文创积分16 -->
      <view
        class="popup_box_paytype"
        v-if="OpenPayTypeArr.indexOf('16') != -1"
        @click="handleCheckPayType(16)"
      >
        <view class="popup_box_paytype_left">
          <image
            class="popup_box_paytype_icon"
            src="../../static/coinWallet_pay.png"
          ></image>
          <view class="popup_box_paytype_type">文创积分支付</view>
        </view>

        <image
          v-if="payTypeChecked == 16"
          class="popup_box_paytype_checked"
          src="../../static/checked.png"
        ></image>
        <image
          v-else
          class="popup_box_paytype_checked"
          src="../../static/unchecked.png"
        ></image>
      </view>

      <!-- <view class="popup_box_button" @click="handlePayImmediately"
            >立即购买</view
          > -->
    </view>

    <u-popup
      v-model="backcardSpringframe"
      mode="center"
      width="670rpx"
      height="520rpx"
      :border-radius="24"
      :closeable="true"
      :mask-close-able="false"
    >
      <view class="Verificationcodes">
        <view class="Verificationtext"> 请输入验证码</view>
        <u-message-input
          mode="bottomLine"
          :maxlength="6"
          inactive-color="#ffffff"
          :focus="true"
          @finish="finish"
        ></u-message-input>
        <view></view>
      </view>
    </u-popup>

    <u-modal
      v-model="show_pay_comfirm"
      :content="content_pay_comfirm"
      @confirm="pay_comfirm"
      @cancel="pay_cancel"
      :show-cancel-button="true"
    ></u-modal>

    <u-popup
      v-model="show_pay_code"
      mode="center"
      width="325px"
      border-radius="32"
      :closeable="true"
      :mask="true"
      :custom-style="pay_code_style"
      @close="pay_code_close"
    >
      <view style="height: 100%">
        <view class="pay_title">扫码完成支付</view>
        <image class="pay_image" :src="pay_code" mode="" />

        <view class="pay_button" @click="save_pay_code">保存二维码</view>
      </view>
    </u-popup>

    <!-- <u-popup
      v-model="show_hy_confirm"
      mode="center"
      width="490rpx"
      height="290rpx"
      :border-radius="24"
      :closeable="true"
      :mask-close-able="false"
    >
      <view class="Transaction_eject">
        <text class="Transaction_top">输入短信验证码</text>
        <input
          type="password"
          value=""
          class="Transaction_center"
          v-model="hy_verify_code"
        />
        <text class="Transaction_bottom" @click="handleHuiyuanConfirm"
          >确定</text
        >
      </view>
    </u-popup> -->

    <u-popup
      v-model="show_hy_confirm"
      mode="center"
      width="670rpx"
      height="300rpx"
      :border-radius="24"
      :closeable="true"
      :mask-close-able="false"
    >
      <view class="Verificationcodes">
        <view class="Verificationtext">请输入短信验证码</view>
        <u-message-input
          :maxlength="6"
          :focus="true"
          :breathe="true"
          :dot-fill="true"
          @finish="handleHuiyuanConfirm"
        ></u-message-input>
        <view></view>
      </view>
    </u-popup>
  </view>
</template>


<script>
import api from "@/api/api.js";
import tip from "@/utils/tip.js";
import { isLogin } from "@/utils/auth.js";
import { getTimeleft } from "@/utils/timeleft.js";
import moment from "moment";

export default {
  data() {
    return {
      show: false,
      payTypeChecked: 2,
      order_no: "",
      orderDetail: [],
      orderDetail_product: {},
      IPaddress: "",
      oldTime: "",
      backcardstate: false,
      backcardSpringframe: false,
      bankcardnumber: null,
      backcardinput: "",
      show_pay_comfirm: false,
      content_pay_comfirm: "是否前往支付",
      webview_url: "",
      OpenPayTypeArr: [],

      show_pay_code: false,
      pay_code: "",
      pay_code_style: {
        padding: "30rpx 0",
      },
      userInfo: "",

      //汇元支付
      show_hy_confirm: false,
      hy_verify_code: "",
      hy_token_id: "",
      is_getPayCode: true,
      payTimer: 0,

      balancenow: 0,
      smallChange: 0,
      marketstate: false,

      sd_wallet_user_no: null,
      shande_wallet_url: "",
    };
  },
  onLoad(options) {
    let payment_method = options.payment_method;
    if (payment_method) {
      this.OpenPayTypeArr = JSON.parse(payment_method);
      if (uni.getStorageSync("unique_code")) {
        this.OpenPayTypeArr = ["15"];
      }
      this.default_check();
    }

    this.order_no = options.order_no;
    this.userInfo = uni.getStorageSync("userInfo");
    this.marketstate = options.market;
    this.order_id = options.order_id;

    let windowElement = uni.getSystemInfoSync();
    this.widHeigh = windowElement.windowHeight;

    this.IPaddress = uni.getStorageSync("ipAddress");

    this.getWalletUrl();
  },
  async onShow() {
    this.getWalletUrl();
    this.getuserWallet();

    if (this.marketstate) {
      await this.shopDetail();
    } else {
      await this.getOrderDetail();
    }
    // this.getOpenPayType();
    this.backcardlist();
    this.info();
  },
  methods: {
    async getuserWallet() {
      let res = await api.userWallet({
        method: "get",
        query: {},
      });

      if (res.code === 0) {
        // this.balancenow = res.data.balance;
        this.balancenow = (
          Number(res.data.balance) - Number(res.data.lock_balance)
        ).toFixed(2);
        this.smallChange = res.data.lock_balance;
      } else {
        tip.defaults(res.msg);
      }
    },
    async handleHuiyuanConfirm(value) {
      // if (this.hy_verify_code == "") {
      //   this.$refs.uToast.show({
      //     title: "请输入短信验证码",
      //   });
      //   return;
      // }

      let res = await api.hy_confirmPay({
        query: {
          order_no: this.order_no,
          hy_token_id: this.hy_token_id,
          // verify_code: this.hy_verify_code,
          verify_code: value,
        },
        method: "POST",
        loading: "加载中",
      });

      console.log("-----hy_confirmPay", res);
      if (res.code == 0) {
        tip.defaults("支付成功");
        this.show_hy_confirm = false;
        this.hy_verify_code = "";
      } else {
        tip.defaults(res.msg);
      }
    },
    async getOpenPayType() {
      let res = await api.openPayType({
        query: {},
        method: "get",
      });
      if (res.code == 0) {
        this.OpenPayTypeArr = res.data.split("|");

        // 一级市场去掉余额支付
        // if (
        //   this.OpenPayTypeArr.length > 0 &&
        //   this.OpenPayTypeArr.indexOf("1") != -1 &&
        //   !this.marketstate
        // ) {
        //   this.OpenPayTypeArr.splice(this.OpenPayTypeArr.indexOf("1"), 1);
        // }

        // 只能用零钱钱包支付
        if (this.orderDetail_product.is_only_balance_pay == 1) {
          this.OpenPayTypeArr = ["14"];
        }

        this.default_check();
      } else {
        tip.defaults(res.msg);
      }
    },
    default_check() {
      // 默认自动选第一个
      if (this.OpenPayTypeArr[0] == "1") {
        this.payTypeChecked = 8;
      } else if (this.OpenPayTypeArr[0] == "5") {
        this.payTypeChecked = 2;
      } else if (this.OpenPayTypeArr[0] == "8") {
        this.payTypeChecked = 0;
      } else if (this.OpenPayTypeArr[0] == "9") {
        this.payTypeChecked = 4;
      } else if (this.OpenPayTypeArr[0] == "10") {
        this.payTypeChecked = 5;
      } else if (this.OpenPayTypeArr[0] == "11") {
        this.payTypeChecked = 6;
      } else if (this.OpenPayTypeArr[0] == "13") {
        this.payTypeChecked = 7;
      } else if (this.OpenPayTypeArr[0] == "14") {
        this.payTypeChecked = 9;
      } else if (this.OpenPayTypeArr[0] == "15") {
        this.payTypeChecked = 10;
      } else if (this.OpenPayTypeArr[0] == "16") {
        this.payTypeChecked = 16;
      }
    },
    pay_cancel() {
      this.show_pay_comfirm = false;
    },
    pay_comfirm() {
      if (this.webview_url) {
        window.open(this.webview_url);
      }
    },
    async shopDetail() {
      let res = await api.boughtDetail({
        method: "POST",
        query: {
          consignment_order_id: this.order_id,
        },
      });
      if (res.code === 0) {
        this.orderDetail = res.data;
        this.orderDetail_product = {
          cover: res.data.consignment.user_product.product.cover,
          name: res.data.consignment.user_product.product.name,
          creator_avatar: res.data.consignment.user_product.user.avatar,
          creator_account: res.data.consignment.user_product.user.account,
          no: res.data.consignment.user_product.no,
          price: res.data.consignment.price,
          user_avatar: res.data.user.avatar,
          user_account: res.data.user.account,
          // is_only_balance_pay: res.data.consignment.is_only_balance_pay,//仅能用零钱支付
        };
        this.pagestate = true;

        if (this.orderDetail.pay_status == 1) {
          this.oldTime = getTimeleft(res.data.expire_at, moment()).duration;
        }
      } else {
        tip.defaults(res.msg);
      }
    },
    finish(e) {
      this.backcardinput = e;
      console.log(this.backcardinput, "this.backcardinput");
      console.log(this.bankcardnumber, "this.bankcardnumber");
      this.jdpay();
    },
    async jdpay() {
      let res = await api.jdConfirmPay({
        query: {
          order_no: this.bankcardnumber,
          code: this.backcardinput,
        },
        method: "post",
      });
      if (res.code == 0) {
        this.orderDetail.pay_status = 2;
        this.orderDetail.pay_type = 7;
        this.orderDetail.pay_at = moment().format("YYYY-MM-DD HH:mm:ss");

        this.backcardSpringframe = false;
        // this.getOrderDetail()
      } else {
        this.backcardSpringframe = false;
        tip.defaults(res.msg);
      }
    },
    tobackcard() {
      uni.navigateTo({
        url: "../backcardnew/backcardnew",
      });
    },
    async backcardlist() {
      let res = await api.bankCardList({});
      if (res.data.data.length > 0) {
        this.backcardstate = true;
      }
    },
    end() {
      if (this.marketstate) {
        this.shopDetail();
      } else {
        this.getOrderDetail();
      }
    },
    async getWalletUrl() {
      let res = await api.getWalletUrl({
        method: "get",
        query: {},
      });

      if (res.code == 0) {
        this.shande_wallet_url = res.data;
      } else {
        tip.defaults(res.msg);
      }
    },
    handleCheckPayType(type) {
      // 杉德收银台
      if (type == 10) {
        // 未开户
        if (!this.userInfo.sd_wallet_user_no) {
          tip.defaults("请前往杉德开户");

          setTimeout(() => {
            // #ifdef H5
            if (this.shande_wallet_url) {
              window.location.href = this.shande_wallet_url;
            }
            // #endif

            // #ifdef APP-PLUS
            if (this.shande_wallet_url) {
              plus.runtime.openURL(this.shande_wallet_url);
            }
            // #endif
          }, 1500);
        }
      }

      this.payTypeChecked = type;
    },
    handlePayImmediately() {
      this.pay();
    },
    async getOrderDetail() {
      let res = await api.userOrderDetail({
        method: "get",
        query: {
          order_no: this.order_no,
        },
      });
      if (res.code === 0) {
        this.orderDetail = res.data;

        this.orderDetail_product = JSON.parse(res.data.product_snap);

        if (this.orderDetail.pay_status == 1) {
          let newTime = moment();
          this.oldTime =
            getTimeleft(this.orderDetail.expire_at, newTime).duration + 1;
        }

        if (this.orderDetail.pay_status != 1) {
          this.show_pay_code = false;
        }

        if (this.OpenPayTypeArr.length == 0) {
          this.getProductDetail();
        }
      } else {
        tip.defaults(res.msg);
      }
    },

    async getProductDetail() {
      let res = await api.productDetail({
        method: "get",
        query: {
          id: this.orderDetail.product_id,
        },
      });

      if (res.code === 0) {
        this.OpenPayTypeArr = JSON.parse(res.data.payment_method);
      } else {
        tip.defaults(res.msg);
      }
    },

    async pay() {
      let paytype = 3;

      // #ifdef H5
      paytype = 6;
      // #endif
      if (this.payTypeChecked == 0) {
        paytype = 2;
      }
      //首信易
      if (this.payTypeChecked == 2) {
        paytype = 5;
      }

      //余额支付
      if (this.payTypeChecked == 8) {
        paytype = 1;
        // if (!this.trade_password) {
        //   this.show_trade_password = true;
        //   return;
        // }
      }

      //零钱支付
      if (this.payTypeChecked == 9) {
        paytype = 14;
        // if (!this.trade_password) {
        //   this.show_trade_password = true;
        //   return;
        // }
      }

      //银行卡
      if (this.payTypeChecked == 3) {
        paytype = 7;
      }

      // #ifdef H5
      if (this.payTypeChecked == 0) {
        // 支付宝H5
        paytype = 8;
      }
      // #endif

      if (!this.backcardstate && this.payTypeChecked == 3) {
        uni.navigateTo({
          url: "../backcardnew/backcardnew",
        });
        return;
      }

      if (this.payTypeChecked == 6) {
        // 未签约
        if (!this.userInfo.hy_auth_uid) {
          tip.defaults("请前往签约汇元支付");

          setTimeout(() => {
            uni.navigateTo({
              url: "../fastPay/fastPay",
            });
          }, 1500);
          return;
        }

        // 60秒内重新点击汇元支付
        if (!this.is_getPayCode) {
          this.show_hy_confirm = true;
          return;
        }

        paytype = 11;
      }

      if (this.payTypeChecked == 7) {
        // 杉德支付
        paytype = 13;
      }

      if (this.payTypeChecked == 4) {
        paytype = 9;
      }

      if (this.payTypeChecked == 5) {
        paytype = 10;
      }

      // 杉德收银台
      if (this.payTypeChecked == 10) {
        // 未开户
        if (!this.userInfo.sd_wallet_user_no) {
          tip.defaults("请前往杉德开户");

          setTimeout(() => {
            // #ifdef H5
            if (this.shande_wallet_url) {
              window.location.href = this.shande_wallet_url;
            }
            // #endif

            // #ifdef APP-PLUS
            if (this.shande_wallet_url) {
              plus.runtime.openURL(this.shande_wallet_url);
            }
            // #endif
          }, 1500);
          return;
        }

        paytype = 15;
      }

      //文创积分支付
      if (this.payTypeChecked == 16) {
        paytype = 16;
      }

      const res = await api.pay({
        method: "post",
        query: {
          pay_type: paytype,
          order_no: this.order_no,
          // client_ip:this.IPaddress
          hy_auth_uid: this.userInfo ? this.userInfo.hy_auth_uid : "",
        },
        loading: "加载中",
      });

      if (res.code == 0) {
        // 现金支付
        if (paytype == 1) {
          tip.defaults("支付成功");
          if (this.marketstate) {
            this.shopDetail();
          } else {
            this.getOrderDetail();
          }
          return;
        }
        // 零钱支付
        if (paytype == 14) {
          tip.defaults("支付成功");
          if (this.marketstate) {
            this.shopDetail();
          } else {
            this.getOrderDetail();
          }
          return;
        }

        // 文创积分支付
        if (paytype == 16) {
          tip.defaults("支付成功");
          if (this.marketstate) {
            this.shopDetail();
          } else {
            this.getOrderDetail();
          }
          return;
        }

        if (this.payTypeChecked == 3) {
          this.backcardSpringframe = true;
          this.bankcardnumber = res.data;
          return;
        }
        if (this.payTypeChecked == 1 && paytype == 6) {
          console.log("网页微信");
          console.log(res.data);
          // window.location.href = res.data;
          if (res.data != null) {
            // window.open(res.data);
            window.location.href = res.data;
          }
          return;
        }
        if (paytype == 8) {
          // window.location.href = res.data;
          if (res.data != null) {
            // window.open(res.data);
            window.location.href = res.data;
          }
          return;
        }
        if (paytype == 9) {
          // #ifdef H5
          // window.location.href = res.data;
          if (res.data != null) {
            // window.open(res.data);
            window.location.href = res.data;
          }
          // #endif

          // #ifdef APP-PLUS
          plus.runtime.openURL(res.data);
          // #endif
          return;
        }
        if (paytype == 10) {
          console.log("----res.data", res.data);
          this.pay_code = res.data;
          this.show_pay_code = true;
          return;
        }
        if (paytype == 11) {
          // 汇元支付 短信倒计时
          this.is_getPayCode = false;
          this.payTimer = 60;
          let payInterval = setInterval(() => {
            this.payTimer--;

            if (this.payTimer <= 0) {
              clearInterval(payInterval);
              this.is_getPayCode = true;
            }
          }, 1000);

          this.hy_token_id = res.data;
          this.show_hy_confirm = true;
          return;
        }
        if (paytype == 13) {
          // #ifdef H5
          if (res.data != null) {
            window.location.href = res.data;
          }
          // #endif

          // #ifdef APP-PLUS
          plus.runtime.openURL(res.data);
          // #endif
          return;
        }
        if (paytype == 15) {
          // #ifdef H5
          if (res.data != null) {
            window.location.href = res.data;
          }
          // #endif

          // #ifdef APP-PLUS
          plus.runtime.openURL(res.data);
          // #endif
          return;
        }
        if (this.payTypeChecked == 2) {
          // #ifdef APP-PLUS
          uni.navigateTo({
            url: `/pages/webview/webview?url=${res.data}`,
          });
          // #endif

          // #ifdef H5
          this.webview_url = res.data;
          this.show_pay_comfirm = true;
          // #endif
          return;
        }
        let appidtype = "wxpay";
        if (this.payTypeChecked == 0) {
          appidtype = "alipay";
        }
        var params = res.data;
        // App上生效
        let orderInfo = {
          appid: params.appid, //对应的appid
          noncestr: params.noncestr,
          package: params.package,
          partnerid: params.partnerid,
          prepayid: params.prepayid,
          timestamp: params.timestamp,
          sign: params.sign, //二次签名
        };
        let alipay = params;
        if (this.payTypeChecked == 1) {
          alipay = JSON.stringify(orderInfo);
        }

        uni.requestPayment({
          provider: appidtype, // wxpay、alipay
          orderInfo: alipay, //微信、支付宝订单数据
          success: function (res) {
            tip.success("支付成功");
            console.log("res", res);
          },
          fail: function (err) {
            tip.defaults("支付失败");
            console.log("err", err);
          },
        });
      } else {
        tip.defaults(res.msg);
      }
    },

    async save_pay_code() {
      // #ifdef APP-PLUS

      // const saveRes = await uni.saveImageToPhotosAlbum({
      //   filePath: this.pay_code,
      // });
      // tip.defaults("保存成功");

      const bitmap = new plus.nativeObj.Bitmap("test");
      bitmap.loadBase64Data(
        this.pay_code,
        function () {
          const url = "_doc/" + new Date().getTime() + ".png"; // url为时间戳命名方式
          bitmap.save(
            url,
            {
              overwrite: true, // 是否覆盖
              // quality: 'quality'  // 图片清晰度
            },
            (i) => {
              uni.saveImageToPhotosAlbum({
                filePath: url,
                success: function () {
                  tip.defaults("保存成功");
                  bitmap.clear();
                },
              });
            },
            (e) => {
              tip.defaults("保存失败");
              bitmap.clear();
            }
          );
        },
        (e) => {
          tip.defaults("保存失败");
          bitmap.clear();
        }
      );
      // #endif

      // #ifdef H5
      tip.defaults("H5请长按图片保存");
      // #endif
    },

    pay_code_close() {
      if (this.marketstate) {
        this.shopDetail();
      } else {
        this.getOrderDetail();
      }
      // this.getOpenPayType();
    },

    async info() {
      let res = await api.info({});
      this.sd_wallet_user_no = res.data.sd_wallet_user_no;
      uni.setStorageSync("userInfo", res.data);
    },

    async getWalletUrl() {
      let res = await api.getWalletUrl({
        method: "get",
        query: {},
      });

      if (res.code == 0) {
        this.shande_wallet_url = res.data;
      } else {
        tip.defaults(res.msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.content {
  font-family: PingFangSC-Regular, PingFang SC;
  padding: 30rpx 30rpx 100rpx 30rpx;
  background: $bg-color1;

  min-height: calc(100vh - 44px);
}
.paytype {
  margin: auto;
  text-align: center;
  &_icon {
    width: 80rpx;
    height: 80rpx;
  }
  &_status {
    margin-top: 20rpx;
    height: 50rpx;
    font-size: 36rpx;
    font-weight: 500;
    color: #1fe7e7;
    line-height: 50rpx;
  }
  &_detail {
    margin-top: 10rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 40rpx;
    color: #1fe7e7;
  }
  &_highlight {
    color: #1fe7e7;
  }
}
.record {
  margin-top: 40rpx;
  display: flex;
  align-items: center;
  width: 690rpx;
  height: 242rpx;
  border-radius: 24rpx;

  background-image: url(../../static/transaction_record_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 242rpx;
  &_image {
    width: 242rpx;
    height: 242rpx;
    border-radius: 24rpx;
  }
  &_content {
    flex: 1;
    padding: 30rpx;
    &_title {
      height: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 44rpx;

      overflow: hidden;
      -webkit-line-clamp: 1;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    &_second {
      margin-top: 20rpx;
      display: flex;
      align-items: center;
    }
    &_avatar {
      width: 36rpx;
      height: 36rpx;
      border-radius: 50%;
    }
    &_username {
      margin-left: 8rpx;
      height: 36rpx;
      font-size: 26rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 36rpx;

      width: 320rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &_third {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 40rpx;
    }
    &_price {
      height: 42rpx;
      font-size: 36rpx;
      font-family: SFPro-Bold, SFPro;
      font-weight: bold;
      color: #ffffff;
      line-height: 42rpx;
    }
    &_status {
      height: 34rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #f78623;
      line-height: 34rpx;
    }
    &_num {
      // width: 32rpx;
      height: 40rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #1fe7e7;
      line-height: 40rpx;
    }
  }
}
.detail {
  margin-top: 30rpx;
  padding: 30rpx;
  width: 690rpx;
  // height: 420rpx;
  background: $bg-color3;
  border-radius: 24rpx;
  &_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    &_left {
      height: 40rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #bbbbbe;
      line-height: 40rpx;
    }
    &_right {
      height: 40rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 40rpx;
    }
  }
  &_row:not(:first-child) {
    margin-top: 40rpx;
  }
}
.bottom {
  padding: 24rpx 0;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;

  // width: 750rpx;
  height: 138rpx;
  background: $bg-color3;
  &_button {
    margin: 0 auto;
    width: 650rpx;
    height: 90rpx;
    border-radius: 16rpx;

    font-size: 32rpx;
    font-weight: 400;
    line-height: 90rpx;
    text-align: center;
    color: $text-color4;
    background: $button;
    background-repeat: no-repeat;
    background-size: 100%;
  }
}
.bottom2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;

  // width: 750rpx;
  height: 138rpx;
  background: $bg-color3;
  &_total {
    display: flex;
    align-items: center;
    &_text1 {
      height: 40rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 40rpx;
    }
    &_text2 {
      height: 58rpx;
      font-size: 48rpx;
      font-weight: bold;
      color: #ffffff;
      line-height: 58rpx;
    }
  }
  &_button {
    font-size: 32rpx;
    font-weight: 400;
    line-height: 90rpx;

    width: 230rpx;
    height: 90rpx;
    text-align: center;
    color: $text-color4;
    background: $button2;
    background-repeat: no-repeat;
    background-size: 100%;
  }
}
.popup_box {
  width: 100%;
  height: 100%;
  min-height: 100rpx;
  padding: 0rpx 50rpx;
  background: $bg-color3;
  margin: 30rpx 0 60rpx;
  border-radius: 24rpx;
  .popup_box_top {
    font-size: 28rpx;
    font-weight: 400;
    color: #ffffff;
    padding: 30rpx 0 10rpx;
    display: flex;
    justify-content: space-between;
  }
  &_title {
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #bbbbbe;
    line-height: 40rpx;
    text-align: center;
  }
  &_price {
    margin-top: 16rpx;
    height: 58rpx;
    font-size: 48rpx;
    font-weight: bold;
    color: #ffffff;
    line-height: 58rpx;
    text-align: center;
  }
  &_title2 {
    margin-top: 52rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 40rpx;
  }
  &_paytype {
    padding: 40rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &_left {
      display: flex;
      align-items: center;
    }
    &_icon {
      width: 40rpx;
      height: 40rpx;
    }
    &_type {
      margin-left: 20rpx;
      height: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 44rpx;
    }
    &_checked {
      width: 40rpx;
      height: 40rpx;
    }
  }
  &_paytype + &_paytype {
    border-top: 2rpx solid #262934;
  }
  &_button {
    margin-top: 30rpx;
    height: 90rpx;
    border-radius: 16rpx;

    font-size: 32rpx;
    font-weight: 400;
    line-height: 90rpx;
    text-align: center;
    color: $text-color4;
    background: $button;
    background-repeat: no-repeat;
    background-size: 100%;
  }
}
.Verificationcode {
  position: relative;
  // top: 50%;
  // transform: translateY(-50%);
  background-color: $bg-color1;
}
.Verificationcodes {
  background-color: $bg-color1;
  height: 520rpx;
  width: 670rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: center;
  .Verificationtext {
    color: #ffffff;
    margin: 60rpx auto -60rpx;
  }
}
.pay {
  &_title {
    height: 80rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: $text-color1;
    line-height: 80rpx;
    text-align: center;
  }
  &_image {
    margin: 30rpx auto;
    width: 500rpx;
    height: 500rpx;
    display: block;
  }
  &_button {
    margin: 30rpx auto;
    color: $text-color4;
    background: $button;
    background-repeat: no-repeat;
    background-size: 100%;
    text-align: center;
    line-height: 70rpx;
    font-size: 28rpx;
    border-radius: 16rpx;
    width: 180rpx;
    height: 70rpx;
  }
}
.Transaction_eject {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 290rpx;
  background-color: $bg-color1;
  .Transaction_top {
    margin-top: 50rpx;
    font-size: 32rpx;
    color: $text-color1;
  }
  .Transaction_center {
    padding: 0 20rpx;
    border: 2rpx solid #262934;
    background: $bg-color3;
    border-radius: 16rpx;
    height: 85rpx;
    width: 80%;
    color: #ffffff;
  }
  .Transaction_bottom {
    font-size: 32rpx;
    color: $text-color1;
    margin-bottom: 30rpx;
  }
}
.Verificationcodes {
  background-color: #ffffff;
  height: 300rpx;
  width: 670rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: center;
  .Verificationtext {
    color: #333333;
    margin: 60rpx auto -60rpx;
  }
}
</style>